<template>
  <div class="homepage">
    <header class="top-banner">
      <img src="@/assets/feige.png" alt="背景" class="banner-bg" />
      <div class="banner-content">
        <div class="logo-container">
          <img src="@/assets/zhiyuan.png" alt="网站logo" class="logo" />
          <div class="site-title">青年志愿服务网 CYVA</div>
        </div>
        <div class="search-box">
          <select class="search-type">
            <option value="news">新闻文章</option>
            <option value="volunteer">志愿项目</option>
            <option value="volunteer_team">志愿队伍</option>
          </select>
          <input type="text" placeholder="请输入关键词" class="search-input" />
          <button class="search-btn">搜索</button>
        </div>
      </div>
    </header>
    <nav class="main-nav">
      <ul class="nav-list">
        <li class="nav-item" @click="HomePage">首页</li>
        <li class="nav-item" @click="ProgramView">志愿项目</li>
        <li class="nav-item" @click="TeamView">志愿队伍</li>
        <li class="nav-item">志愿风采</li>
        <li class="nav-item">信息动态</li>
        <li class="nav-item">媒体报道</li>
        <li class="nav-item">研究培训</li>
        <li class="nav-item">政策文件</li>
        <li class="nav-item">通知公告</li>
        <li class="nav-item" @click="LoginView">登录</li>
        <li class="nav-item" @click="ZhuceView">注册</li>
        <li class="nav-item" @click="PersonView">个人中心</li>
        <li class="nav-item" @click="ChatView">汤圆AI</li>
        <li class="nav-item">更多</li>
      </ul>
    </nav>
      <div class="volunteer-filter">
      <div class="filter-item">
        <label>项目区域：</label>
        <button
          v-for="(area, index) in areaList"
          :key="index"
          :class="{ active: currentArea === area }"
          @click="handleAreaChange(area)"
        >
          {{ area }}
        </button>
      </div>
      <div class="filter-item">
        <label>服务类别：</label>
        <button
          v-for="(category, index) in categoryList"
          :key="index"
          :class="{ active: currentCategory === category }"
          @click="handleCategoryChange(category)"
        >
          {{ category }}
        </button>
      </div>
      <div class="filter-item">
        <label>队伍：</label>
        <button
          v-for="(status, index) in statusList"
          :key="index"
          :class="{ active: currentStatus === status }"
          @click="handleStatusChange(status)"
        >
          {{ status }}
        </button>
      </div>
    </div>
    <div class="back-top" @click="backToTop">TOP<br />显示</div>
  </div>
</template>

<script>
export default {
  name: "BlueLayoutPage",
  data() {
    return {
      areaList: [
        "全部",
        "全国",
        "北京市",
        "天津市",
        "河北省",
        "山西省",
        "内蒙古自治区",
        "辽宁省",
        "吉林省",
        "黑龙江省",
        "上海市",
        "江苏省",
        "浙江省",
        "安徽省",
        "福建省",
        "江西省",
        "山东省",
        "河南省",
        "湖北省",
        "湖南省",
        "广东省",
        "广西壮族自治区",
        "海南省",
        "重庆市",
        "四川省",
        "贵州省",
        "云南省",
        "西藏自治区",
        "陕西省",
        "甘肃省",
        "青海省",
        "宁夏回族自治区",
        "新疆维吾尔自治区",
        "新疆建设兵团",
      ],
      currentArea: "全部",
      categoryList: [
        "全部",
        "社区服务",
        "扶贫减贫",
        "支教助学",
        "卫生健康",
        "法律服务",
        "环境保护",
        "科技科普",
        "文化艺术",
        "平安综治",
        "文明风尚",
        "交通引导",
        "志愿消防",
        "应急救援",
        "禁毒宣传",
        "体育健身",
        "旅游服务",
        "关爱特殊群体",
        "大型活动",
        "海外志愿服务",
        "税收服务",
        "疫情防控",
        "其他",
      ],
      currentCategory: "全部",
      statusList: ["全部", "待组织", "活动中", "已解散"],
      currentStatus: "全部",
    };
  },
  methods: {
    backToTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
    TeamView() {
      this.$router.push("/TeamView");
    },
    LoginView() {
      this.$router.push("/LoginView");
    },
    ChatView() {
      this.$router.push("/ChatView");
    },
    ZhuceView() {
      this.$router.push("/ZhuceView");
    },
    ProgramView() {
      this.$router.push("/ProgramView");
    },
    PersonView() {
      this.$router.push("/PersonView");
    },
    HomePage() {
      this.$router.push("/HomePage");
    },
  },
};
</script>

<style scoped>
.homepage {
  font-family: Arial, sans-serif;
  background-color: #eaf5fc;
  color: #333;
}
.top-banner {
  position: relative;
  width: 100%;
}
.banner-bg {
  width: 100%;
  height: 150px;
  display: block;
  object-fit: cover;
}
.banner-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px;
  box-sizing: border-box;
}
.logo-container {
  display: flex;
  align-items: center;
}
.logo {
  width: 100px;
  height: 100px;
  margin-right: 20px;
  border-radius: 100px;
}
.site-title {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.search-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
  width: 40%;
  max-width: 500px;
}
.search-type {
  padding: 6px 10px;
  border: none;
  background-color: #f0f8ff;
}
.search-input {
  padding: 6px 10px;
  border: none;
  outline: none;
  flex: 1;
}
.search-btn {
  padding: 6px 20px;
  border: none;
  background-color: #4682b4;
  color: #fff;
  cursor: pointer;
}
.main-nav {
  background-color: #4682b4;
  width: 100%;
}
.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  flex-wrap: wrap;
}
.nav-item {
  padding: 10px 20px;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.nav-item:hover {
  background-color: #1e3a5f;
}

.content {
  width: 90%;
  margin: 20px auto;
}
.headline {
  margin-bottom: 20px;
}
.headline-tag {
  background-color: rgb(182 11 39 / 99%);
  color: #fff;
  padding: 5px 10px;
  display: inline-block;
  margin-bottom: 10px;
}
.headline-title {
  margin: 0;
  font-size: 24px;
}
.volunteer-filter {
  flex-direction: column;
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  border-bottom:dashed #1e3a5f;
}

.filter-item label {
  margin-right: 8px;
}
.filter-item select {
  padding: 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.img-box {
  width: 48%;
}
.img-box img {
  width: 100%;
  height: auto;
  display: block;
}
.img-desc {
  text-align: center;
  margin-top: 10px;
}
.item-text {
  flex: 1;
}
.item-date {
  color: #999;
}
.back-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background-color: #4682b4;
  color: #fff;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}
.filter-container {
  padding: 10px;
}
.filter-item {
  margin-bottom: 10px;
}
.filter-item label {
  margin-right: 5px;
}
.filter-item button {
  margin-right: 5px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  border-radius: 10px;
  margin-left: 5px;
  margin-top: 5px;
}
.filter-item button.active {
  background-color: #4682b4;
  color: #fff;
}
.result {
  margin-top: 10px;
}
</style>
